@import "./com";
// 头部
header {
    width: vw(750);
    .hdr_top {
        display: flex;
        justify-content: space-around;
        margin-top: vw(50);
        text-align: center;
        line-height: vw(57);
        p:nth-of-type(1) {
            width: vw(120);
            height: vw(57);
            border: 2px solid $col;
            border-radius: vw(30);
        }
        .sel {
            position: relative;
            select {
                width: vw(160);
                height: vw(60);
                border: vw(1) solid $col;
                box-sizing: border-box;
                appearance: none;
                padding-left: vw(20);
                font-size: vw(26);
            }
            i {
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: vw(-10);
                margin-right: vw(16);
                width: 0;
                height: 0;
                border: vw(13) solid transparent;
                border-top: vw(20) solid $col;
                //穿透
                pointer-events: none;
            }
        }
    }
    .hdr_nav2 {
        position: relative;
        margin-top: vw(20);
        width: 100%;
        height: vw(217);
        ul {
            width: 100%;
            display: flex;
            justify-content: space-around;
            li {
                display: inline-block;
                text-align: center;
                a {
                    width: vw(150);
                    height: vw(150);
                    display: flex;
                    img {
                        height: 100%;
                    }
                }
            }
        }
        // 圆点
        .yuan {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(vw(-50));
            p {
                display: inline-block;
                width: vw(20);
                height: vw(20);
                background-color: $col;
                border-radius: 50%;
            }
        }
    }
}

// 主要内容
main {
    // 导航
    .tuan {
        width: 100%;
        height: vw(100);
        line-height: vw(100);
        margin-top: vw(20);
        padding-left: vw(22);
        box-sizing: border-box;
        img {
            vertical-align: middle;
            width: vw(58);
        }
        span:nth-of-type(2) {
            float: right;
            margin-right: vw(20);
            img {
                width: vw(27);
                height: vw(25);
            }
        }
    }
}

.sou_si {
    height: vw(206);
    box-sizing: border-box;
    ul {
        display: flex;
        justify-content: space-around;
        padding: vw(20) 0;
        li {
            a {
                width: vw(133);
                height: vw(133);
                img {
                    width: vw(133);
                    height: vw(133);
                }
            }
        }
    }
}

//底部导航栏
nav {
    position: fixed;
    bottom: 0;
    margin-top: vw(14);
    width: vw(750);
    .nav_di {
        width: 100%;
        ul {
            display: flex;
            width: 100%;
            li {
                flex-basis: 25%;
                display: inline-block;
                padding-left: vw(57);
                a {
                    display: flex;
                    width: vw(77);
                    height: vw(77);
                    img {
                        width: 100%;
                        vertical-align: auto;
                    }
                }
            }
        }
    }
}